<template>
<div id="orders-type-in">
  <h2>需求计划录入</h2>
  <h4 style="color: red">请选择要录入的物资</h4>
    <!--物资分组展示开始-->
      <el-collapse v-model="activeNames"  @change="handleChange">
        <el-collapse-item  v-for="(dict,index) in dictEntities" :key="index" :name="index+1">
          <template slot="title">
            <el-button type="text" @click="displayMaterial(dict)">{{ dict.desc }}</el-button>
          </template>
          <button class="material-item" @click="show(materialEntity)" v-for="(materialEntity,index) in materialEntities" :key="index" v-if="dict.id===materialEntity.materialType" >
            {{materialEntity.materialName}}
<!--            {{materialEntity.materialNum}}-->
          </button>
        </el-collapse-item>
      </el-collapse>
  <el-dialog title="录入物资" :visible.sync="dialogFormVisible" >
    <el-form :model="form" :rules="dataRule" ref="form">
      <el-form-item label="物资编码" :label-width="formLabelWidth">
        <el-input v-model="material.materialNum" autocomplete="off" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="物资名称" :label-width="formLabelWidth">
        <el-input v-model="material.materialName" autocomplete="off" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="数量" prop="amount" :label-width="formLabelWidth">
        <el-input v-model="form.amount" autocomplete="off" type="number" :min="1"></el-input>
      </el-form-item>
      <el-form-item label="计量单位" :label-width="formLabelWidth">
        <el-input v-model="material.materialUnit" autocomplete="off" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="预单价(元)" prop="unitPrice" :label-width="formLabelWidth">
        <el-input v-model="form.unitPrice" autocomplete="off"  type="number" :min="0"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancellation">取 消</el-button>
      <el-button type="primary" @click="formSubmit">确 定</el-button>
    </div>
  </el-dialog>
    <!--物资分组展示结束-->

  <!--物资查询框开始-->
  <el-dialog
    :title="dict.desc"
    :visible.sync="dialogVisible"
    width="50%">

    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.materialNum" placeholder="物资编码" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.materialName" placeholder="物资名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="dataTypeList"
      v-loading="dataListLoading"
      style="width: 100%;">
      <el-table-column
        prop="id"
        header-align="center"
        align="center"
        label="序号">
      </el-table-column>
      <el-table-column
        prop="materialNum"
        header-align="center"
        align="center"
        label="物资编码">
      </el-table-column>
      <el-table-column
        prop="materialName"
        header-align="center"
        align="center"
        label="物资名称">
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="showForm(scope.row.id)">录入</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[5,10]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </el-dialog>
  <!--物资查询结束-->
</div>


</template>

<script>
  import AddOrUpdate from "@/views/orders/orders-add-or-update.vue";

  export default {
    components: {AddOrUpdate},
    data () {
      return {
        activeNames: ['1'],//物资分组表头
        dictEntities:[],
        dictEntityIds:[],
        materialEntities:[],
        visible: false,

        dataListLoading: false,//物资分组内容展示
        addOrUpdateVisible: false,
        labelPosition: 'left',

        //表单提交
        dialogFormVisible: false,//对话框不显示
        material:'',
        form: {
          amount: '',
          unitPrice:'',
        },
        formLabelWidth: '120px',//输入框宽度
        dataRule:{
          amount:[
            {required:true,message:'数量不能为空',trigger:'blur'}
          ],
          unitPrice:[
            {required:true,message:'预单价不能为空',trigger:'blur'}
          ],
        },

        dialogVisible: false,//查询框显示
        dict:{},
        dataForm:{
          materialNum:'',
          materialName:''
        },
        dataTypeList:[],
        pageIndex: 1,
        pageSize: 5,
        totalPage: 0,
      }
    },
    mounted() {
      // this.getDataList()
    },
    created() {
      this.$http({
        url:this.$http.adornUrl('purchase/productCategory/materialType'),
        method:'get',
        }).then((data)=>{
        this.dictEntities=data.page.list
        this.dictEntities.forEach((dictEntity)=>{
          this.dictEntityIds.push(dictEntity.id)
        })
        console.log("dictEntityIds:"+this.dictEntityIds)
      }),
        this.$http({
          url:this.$http.adornUrl('/purchase/material/list'),
          method:'get',
        }).then((data)=>{
          this.materialEntities=data.materialList
          console.log("materialEntities:"+this.materialEntities)
        })
    },
    methods: {
      handleChange(val) {
        console.log(val);
      },
      show(materialEntity){//显示待录入物资弹框内的产品信息
        this.dialogFormVisible = true
        this.material=materialEntity
      },
      cancellation(){//取消
        this.dialogFormVisible = false
        this.form={}
      },
      formSubmit(){//新增需求计划
        this.dialogFormVisible = false
        this.$http({
          url:this.$http.adornUrl('/purchase/orders/saveOrUpdate'),
          method:'post',
          data:{
            materialNum:this.material.materialNum,
            materialName:this.material.materialName,
            amount:this.form.amount,
            measureUnit:this.material.materialUnit,
            unitPrice:this.form.unitPrice
          }
        }).then((data)=>{
          if (data && data.code === 200) {
            this.$message({
              message: '需求计划录入成功',
              type: 'success',
            })
            this.form={}
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      displayMaterial(dict){//显示物资类别搜索框
        this.dialogVisible= true
        this.dict=dict
        this.pageIndex = 1
        this.getDataList()
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 显示表格内内容
      getDataList(){
        this.dataListLoading=true
        this.$http({
          url:this.$http.adornUrl('purchase/material/queryByMaterialType'),
          method:'get',
          params:this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'materialType':this.dict.id,
            'materialNum':this.dataForm.materialNum,
            'materialName':this.dataForm.materialName
          })
        }).then((data)=>{
          if (data && data.code === 200){
            console.log(data)
            this.dataTypeList = data.page.list
            this.totalPage = data.page.totalCount
          }else{
            this.dataTypeList = []
            this.totalPage = 0
          }
          this.dataListLoading=false
        })
      },
      //在表格点录入,显示表单
      showForm(id){
        this.$http({
          url:this.$http.adornUrl(`/purchase/material/info/${id}`),
          method:'get',
        }).then((data)=>{
          this.dialogFormVisible = true
          this.material=data.material
        })
      }
    }
  }
</script>

<style lang="scss" scoped>

#nextStep{
  display: flex;
  justify-content: center;
}

#orders-type-in{

  ::v-deep .el-collapse-item__content{
    //弹性布局
    display: flex;
    //flex-direction属性决定主轴的方向（即项目的排列方向）。
    flex-direction: row;
    //flex-wrap属性定义，如果一条轴线排不下，如何换行。
    //wrap：换行，第一行在上方。
    flex-wrap:  wrap;
    //align-content属性定义了多根轴线的对齐方式。
    //flex-start：与交叉轴的起点对齐。
    align-content: flex-start;
    //justify-content属性定义了项目在主轴上的对齐方式。
    //space-between：两端对齐，项目之间的间隔都相等。
    justify-content:start;
    .material-item{
      width: 150px;
      font-size: 15px;
      background-color: white;
      border: none;
    }
    *{
      margin-right: 30px;
      margin-left: 30px;
    }
  }
  ::v-deep .el-button--text{
    font-size: 18px;
    //font-weight: bolder;
  }
}

</style>
